﻿<%@ Page Title="" Language="C#" MasterPageFile="~/master/m.master" %>

<script runat="server">
</script>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <script src="assets/js/plugins/echarts/echarts.js"></script>
    <link href="assets/css/plugins/footable/footable.core.css" rel="stylesheet">
    <style>
        .wrapper-content {
            padding: 10px;
        }

        .col-sm-6 {
            padding-left: 8px;
            padding-right: 8px;
        }

        .ibox {
            margin-bottom: 10px;
        }

        .ibox-title {
            border-width: 1px 0 0;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="main" runat="Server">
    <div class="wrapper wrapper-content">
        <div id="bh-dv">
            <div class="row">
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <%--<div class="ibox-title">
                        <span class="label label-success pull-right">核心码数量</span>
                        <h5>城市核心码</h5>
                    </div>--%>
                        <div class="ibox-content">
                            <div id="sizetypeChart" style="height: 230px;"></div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <%--                    <div class="ibox-title">
                        <span class="label label-info pull-right">全年</span>
                        <h5>订单</h5>
                    </div>--%>
                        <div class="ibox-content">
                            <div id="bczpChart" style="height: 230px;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <%--                    <div class="ibox-title">
                        <span class="label label-success pull-right">月</span>
                        <h5>收入</h5>
                    </div>--%>
                        <div class="ibox-content">
                            <div id="dwSuppleAllMessageChart" style="height: 230px;"></div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <%--                        <span class="label label-success pull-right">月</span>--%>
                            <h5><span id="year"></span>节日信息</h5>
                        </div>
                        <div class="ibox-content" style="overflow: auto; height: 218px; width: 98%; padding: 0px 0px">
                            <table class="footable table table-stripped log-list  table-bordered table-hover" data-page-size="10">
                                <thead>
                                    <tr>
                                        <th>节日名称</th>
                                        <th>开始时间</th>
                                        <th>持续时间</th>
                                    </tr>
                                </thead>
                                <tbody id="pageList">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="qh-dv" class="hide">
            <div class="row">
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <%--<div class="ibox-title">
                        <span class="label label-success pull-right">核心码数量</span>
                        <h5>城市核心码</h5>
                    </div>--%>
                        <div class="ibox-content">
                            <div id="qiHuaPriceChart" style="height: 230px;"></div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <%--                    <div class="ibox-title">
                        <span class="label label-info pull-right">全年</span>
                        <h5>订单</h5>
                    </div>--%>
                        <div class="ibox-content">
                            <div id="shopColorChart" style="height: 230px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="csrd-dv" class="hide">
            <div class="row">
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <%--<div class="ibox-title">
                        <span class="label label-success pull-right">结算</span>
                        <h5>结算</h5>
                    </div>--%>
                        <div class="ibox-content">
                            <div id="balanceChart" style="height: 230px;"></div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-content">
                            <div id="balanceCoutChart" style="height: 230px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="footer" runat="Server">
    <script src="assets/js/plugins/footable/footable.all.min.js"></script>
    <script src="assets/js/page/pageControl.js"></script>
    <script src="assets/js/laytpl.js"></script>

    <script type="text/javascript">

        //获取用户登录信息
        var userData = $.parseJSON(sessionStorage.getItem('login-info'));
        var userSysType = userData.SysType;

        var myformatter = function (params, strLen) {
            var newParams = "";
            var paramsLen = params.length;
            var rowNumber = Math.ceil(paramsLen / strLen);
            if (paramsLen > strLen) {
                for (var p = 0; p < rowNumber; p++) {
                    var tempStr = "";
                    var start = p * strLen;
                    var end = start + strLen;
                    if (p == rowNumber - 1) {
                        tempStr = params.substring(start, paramsLen);
                    } else {
                        tempStr = params.substring(start, end) + "\n";
                    }
                    newParams += tempStr;
                }
            } else {
                newParams = params;
            }
            return newParams;
        };


        var getCharAt = function (arr, n) {
            var c = "";
            for (var i = 0; i < arr.length; i++) {
                if (arr[i][n] != undefined) {
                    c = c + arr[i][n];
                }
                else {
                    c = c + '    ';
                }
            }
            return c;
        }

        var myformatter2 = function (params, len) {
            var arr = [];
            for (var i = 0; i <= Math.ceil(params.length / len) ; i++) {
                str1 = params.substr(0, len);
                params = params.replace(str1, '');
                arr.push(str1);
            }
            var r = "";
            var j = 0;
            for (var i = 0; i < arr.length; i++) {
                for (; j < arr[i].length; j++) {
                    r = r + getCharAt(arr, j) + "\r\n";
                }
            }
            return r;
        }




        //城市核心码柱形图
        var sizetypeChart = echarts.init(document.getElementById('sizetypeChart'));
        //爆畅滞平漏斗图
        var bczpChart = echarts.init(document.getElementById('bczpChart'));
        //补货量柱形图
        var dwSuppleChart = echarts.init(document.getElementById('dwSuppleAllMessageChart'));
        //企划金额柱形图
        // 暂时屏蔽  var qiHuaPriceChart = echarts.init(document.getElementById('qiHuaPriceChart'));
        //店铺颜色形状图
        // 暂时屏蔽   var shopColorChart = echarts.init(document.getElementById('shopColorChart'));

        //结算数据
        // 暂时屏蔽   var balanceChart = echarts.init(document.getElementById('balanceChart'));
        // 暂时屏蔽   var balanceCoutChart = echarts.init(document.getElementById('balanceCoutChart'));

        var loadSizetypeChart = function (data) {
            var textList = [];
            var numList = [];
            data.Data.map(function (item) {
                textList.push(item.SizeName);
                numList.push(item.DisplayQtySum);
            });

            var sizetypeOption = {
                title: {
                    text: '城市核心码',
                    subtext: '系统默认相应尺码设置的陈列量为核心尺码'
                },
                legend: {
                    data: ['陈列量']
                },
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter: "核心码：{b} <br/>陈列量：{c}"
                },
                grid: {
                    left: '0%',
                    right: '0%',
                    bottom: '0%',
                    width: '85%',
                    height: '60%',
                    containLabel: true
                },
                xAxis: [
                    {
                        name: '尺码',
                        type: 'category',
                        data: textList,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        name: '数量',
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '陈列量',
                        type: 'bar',
                        barWidth: '60%',
                        data: numList
                    }
                ]
            };
            sizetypeChart.setOption(sizetypeOption);
        };

        var loadBCZPChart = function (data) {
            var textList = [];
            var dataList = [];
            data.Data.map(function (item) {
                textList.push(item.BCZPTypeName);
                var temp = { name: item.BCZPTypeName, value: item.Count };
                dataList.push(temp);
            });

            var bczpOption = {
                title: {
                    text: '爆畅滞平',
                    subtext: '显示前一天的爆畅滞平数据',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a}：{b}<br/> 数量：{c}({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: textList
                },
                series: [
                    {
                        name: '当前区块',
                        type: 'pie',
                        radius: '60%',
                        center: ['50%', '65%'],
                        data: dataList,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            bczpChart.setOption(bczpOption);
        };

        var loadDWSuppleChart = function (data) {
            var textList = [];
            var numList = [];
            data.Data.map(function (item) {
                textList.push(item.ShopName);
                numList.push(item.SuppleQtySum);
            });

            var dwSuppleChartOption = {
                title: {
                    text: '店铺补货量',
                    subtext: '显示当天补货量前10的店铺资料'
                },
                legend: {
                    data: ['补货量']
                },

                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '0%',
                    containLabel: true,
                    //x: 40,
                    //x2: 100,
                    //y2: 250
                },
                xAxis: [
                    {

                        type: 'category',
                        data: textList,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            interval: 0,
                            //rotate: 45,//倾斜度 -90 至 90 默认为0
                            //margin: 2,
                            textStyle: {
                                color: "#000000",
                                fontsize: '1rem'
                            }
                            ,
                            formatter: function (params) {
                                return myformatter2(params, 5);//竖着排
                                //return myformatter(params, 3);//横着排
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '补货量',
                        type: 'bar',
                        barWidth: '60%',
                        data: numList
                    }
                ]
            };
            dwSuppleChart.setOption(dwSuppleChartOption);
        };

        var loadHolidayTable = function (data) {
            var text = "";
            $("#year").text(data.Year + "年");
            data.List.map(function (item) {
                if (item.IsNext) {
                    text += '<tr style="color:red;background: #dff0d8;"><td>' + item.TypeName + "</td><td>" + item.BeginDate + "</td><td>" + item.Duration + "</td></tr>";
                } else {
                    text += "<tr><td>" + item.TypeName + "</td><td>" + item.BeginDate + "</td><td>" + item.Duration + "</td></tr>";
                }

            });
            $("#pageList").html(text);
        }

        var loadQihuaPriceChart = function (data) {
            var textList = [];
            var numList = [];
            data.map(function (item) {
                textList.push(item.ParentAreaID);
                numList.push(item.QiHuaPrice);
            });

            var qiHuaPriceOption = {
                title: {
                    text: '企划金额汇总',
                    subtext: '显示当前企划月个区域的总企划金额汇总'
                },
                legend: {
                    data: ['企划金额']
                },

                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '0%',
                    containLabel: true,
                    //x: 40,
                    //x2: 100,
                    //y2: 250
                },
                xAxis: [
                    {

                        type: 'category',
                        data: textList,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            interval: 0,
                            //rotate: 45,//倾斜度 -90 至 90 默认为0
                            //margin: 2,
                            textStyle: {
                                color: "#000000",
                                fontsize: '1rem'
                            }
                            ,
                            formatter: function (params) {
                                //return myformatter2(params, 5);//竖着排
                                return myformatter(params, 3);//横着排
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '企划金额',
                        type: 'bar',
                        barWidth: '60%',
                        data: numList
                    }
                ]
            };
            qiHuaPriceChart.setOption(qiHuaPriceOption);
        };

        var loadShopColorChart = function (data) {
            var textList = [];
            var dataList = [];
            data.Data.map(function (item) {
                textList.push(item.Name);
                var temp = { name: item.Name, value: item.Total };
                dataList.push(temp);
            });

            var shopColorOption = {
                title: {
                    text: '店铺颜色',
                    subtext: '店铺颜色占比',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a}：{b}<br/> 数量：{c}({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: textList
                },
                series: [
                    {
                        name: '当前区块',
                        type: 'pie',
                        radius: '60%',
                        center: ['50%', '65%'],
                        data: dataList,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            shopColorChart.setOption(shopColorOption);
        };

        //结算
        var loadBalanceChart = function (data) {
            var textList = [];
            var numList = [];
            data.Data.map(function (item) {
                textList.push(item.BalanceDate);
                numList.push(item.BalanceAmount);
            });

            var balanceOption = {
                title: {
                    text: '结算数据'
                },
                legend: {
                    data: ['结算金额']
                },
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter: "结算期间：{b} <br/>结算金额：{c}"
                },
                grid: {
                    left: '0%',
                    right: '0%',
                    bottom: '0%',
                    width: '85%',
                    height: '60%',
                    containLabel: true
                },
                xAxis: [
                    {
                        name: '结算期间',
                        type: 'category',
                        data: textList,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        name: '金额',
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '结算金额',
                        type: 'bar',
                        barWidth: '60%',
                        data: numList

                    }
                ]
            };
            balanceChart.setOption(balanceOption);
        };
        var loadBalanceCountChart = function (data) {
            var textList = [];
            var numList = [];
            var numList2 = [];
            data.Data.map(function (item) {
                textList.push(item.BalanceDate);
                numList.push(item.Balance * 100);
                numList2.push(item.NoBalance * 100);
            });

            balanceOption = {
                title: {
                    text: '结算占比'
                },
                tooltip: {
                    trigger: 'item',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter: "{b} <br/> {a}： {c}%"
                },
                legend: {
                    data: ['已结算', '未结算']
                },
                calculable: true,
                xAxis: [
                    {
                        name: '结算期间',
                        type: 'category',
                        data: textList
                    }
                ],
                grid: {
                    left: '0%',
                    right: '0%',
                    bottom: '0%',
                    width: '85%',
                    height: '60%',
                    containLabel: true
                },
                yAxis: [
                    {
                        name: '%',
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '已结算',
                        type: 'bar',
                        stack: '结算',
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    return '#5cb85c'
                                }
                            }
                        },
                        data: numList
                    },
                    {
                        name: '未结算',
                        type: 'bar',
                        stack: '结算',
                        data: numList2
                    }
                ]
            };
            balanceCoutChart.setOption(balanceOption);
        };
        var PlanApi = function () {
            Y.InitAPI(
            {
                controller: "PriceComparison",
                action: 'GetAreasPriceChart',
                data: {},
                callBack: function (data) {
                    if (data.Success == false) {
                        swal(data.Message, '', 'error');
                    } else {
                        loadQihuaPriceChart(data.Data);
                    }
                }
            }
            ,
            {
                controller: "PLBasShopColorRate",
                action: 'GetShopColorChart',
                data: {},
                callBack: function (data) {
                    if (data.Success == false) {
                        swal(data.Message, '', 'error');
                    } else {
                        loadShopColorChart(data);
                    }
                }
            }
        );
        }

        var DistributeApi = function () {
            Y.InitAPI({
                controller: "SizeType",
                action: 'GetSizetypeCount',
                data: {},
                callBack: function (data) {
                    if (data.Success == false) {
                        swal(data.Message, '', 'error');
                    } else {
                        loadSizetypeChart(data);
                    }
                }
            },
            {
                controller: "DwCZPJudgePeriod",
                action: 'GetSizetypeCount',
                data: {},
                callBack: function (data) {
                    if (data.Success == false) {
                        swal(data.Message, '', 'error');
                    } else {
                        loadBCZPChart(data);
                    }
                }
            },
            {
                controller: "DWSuppleAllMessage",
                action: 'GetTopYesterdayDWSuppleAllMessage',
                data: {},
                callBack: function (data) {
                    if (data.Success == false) {
                        swal(data.Message, '', 'error');
                    } else {
                        loadDWSuppleChart(data);
                    }
                }
            },
            {
                controller: "Calendar",
                action: 'GetAllHolidayByYear',
                data: {},
                callBack: function (data) {
                    if (data.Success == false) {
                        swal(data.Message, '', 'error');
                    } else {
                        loadHolidayTable(data.Data);
                    }
                }
            }
        );

        }

        var CsrdApi = function () {
            Y.InitAPI({
                controller: "Balance",
                action: 'GetBalance',
                data: {},
                callBack: function (data) {
                    if (data.Success == false) {
                        swal(data.Message, '', 'error');
                    } else {
                        loadBalanceChart(data);
                    }
                }
            }, {
                controller: "Balance",
                action: 'BalanceCount',
                data: {},
                callBack: function (data) {
                    if (data.Success == false) {
                        swal(data.Message, '', 'error');
                    } else {
                        loadBalanceCountChart(data);
                    }
                }
            });
        }



        if (userSysType == "Plan-System") {
          //  PlanApi();
            $("#qh-dv").show();
            $("#bh-dv").hide();
            $("#csrd-dv").hide();
        }
        else if (userSysType == "Distribute-System") {
            DistributeApi();
            $("#qh-dv").hide();
            $("#bh-dv").show();  
            $("#csrd-dv").hide();
        }
        else if (userSysType == "CSRD-System") {
           // CsrdApi();
            $("#qh-dv").hide();
            $("#bh-dv").hide();
            //  $("#csrd-dv").show();//暂时隐藏
        }
        else {
           // PlanApi();
            DistributeApi();
           // CsrdApi();
            $("#qh-dv").show();
            $("#bh-dv").show();
           // $("#csrd-dv").show();
        }




        //用于图标自适应窗口变化大小
        window.onresize = function () {
            sizetypeChart.resize();
            bczpChart.resize();
            dwSuppleChart.resize();
        };
    </script>


</asp:Content>

